<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通知</title>
   	<script src="scripts/layui/lay/modules/laydate.js"></script>
    <link  rel="stylesheet"  href="scripts/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="scripts/layui/layui.js" charset="utf-8"></script>
    <script src="scripts/js/jquery-2.1.1.min.js"></script>
    <script src="scripts/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="scripts/css/bootstrap.min.css" />
    <script src="scripts/js/vue.min.js"></script>
    <script src="scripts/js/vue.js"></script>
    <style>
     	#main{
     		width: 90%;
     	}
     	#tab{
     		margin: auto;
     		 width: 88%;
     	}
       	#mtk{
       		width: 360px;
       	}
       	#th{
       		font-size: 18px;
       		background-color: #D2E9FF;
       	}
       
    </style>
</head>
<body>
<div id="main">
	<%session.setAttribute("userid",4);%>
	<%session.setAttribute("username","无所谓");%>
	<h3 style="margin: 40px;"><a href="#">计划列表</a>>计划管理<div id="nowtime" style="float:right;"></div></h3>
	
	<fieldset class="layui-elem-field layui-field-title" style="margin-left: 50px;margin-right: 50px;">
  		<legend>我的管理</legend>
  		<div >
  			<button class="close" data-dismiss="modal" aria-hidden="true" id="addnotice" style="float:right;">添加计划</button>
  			<button class="layui-btn layui-btn-sm layui-btn-danger" v-on:click="deleteplan" style="margin-left:30px;">删除</button>
  		</div>
	</fieldset>
	<table class="layui-table" lay-skin="nob" id="tab">
		<colgroup>
			<col width="10">
			<col width="80">
			<col width="80">
			<col width="80">
			<col width="40">
			<col width="120">
		</colgroup>
			<tr >
				<th><input type="checkbox" id="checkAll" rel="item"></th>
				<th id="th">我的计划</th>
				<th id="th">计划开始时间</th>
				<th id="th">计划结束时间</th>
				<th id="th" class="sta">完成状态</th>
				<th id="th">操作</th>
			</tr>
			<tr v-for="pl in plist">
				<td><input type="checkbox" name="check" class="child_item" v-bind:value="pl.pl_id" ></td>
				<td >{{pl.pl_name}}</td>
				<td >{{pl.pl_starttime}}</td>
				<td id="endtm">{{pl.pl_endtime}}</td>
				<td >{{pl.pl_state}}</td>
				<td >
					<button data-dismiss="modal" aria-hidden="true" v-on:click="showplan($event,pl.pl_id)" id="lookContent" class="layui-btn layui-btn-primary layui-btn-xs">查看详情</button>
					<template v-if="pl.pl_state=='未完成'">
					<button id="finish" v-on:click="upState($event,pl.pl_id)" class="layui-btn layui-btn-primary layui-btn-xs">确认完成</button>
					<button id="modif" v-on:click="xgmtk($event,pl.pl_id)" data-dismiss="modal" aria-hidden="true" class="layui-btn layui-btn-primary layui-btn-xs">修改计划</button>
					</template>
				</td>
			</tr>
	</table>
	<div id="fenye" style="margin:10px 0 0 80px;"></div>
	<!-- 详情显示模态框 -->
	<div class="modal fade" id="showContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width:400px">
                <div class="modal-body">
          		  <table class="layui-table" lay-skin="nob">
				    <tr><td style="width:15%;">计划标题:</td><td>{{plan.pl_name}}</td></tr> 
				    <tr><td>执行人:</td><td>{{plan.pl_username}}</td></tr>
				    <tr><td>开始时间:</td><td>{{plan.pl_starttime}}</td></tr>
				    <tr><td>结束时间:</td><td>{{plan.pl_endtime}}</td></tr>
				    <tr><td>内容详情:</td><td><textarea readonly style="min-width:300px;min-height:80px;max-width:300px;max-height:80px;">{{plan.pl_content}}</textarea></td></tr>
				 </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div> 
    <!-- 修改计划模态框 -->
    <div class="modal fade" id="modifPlan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 450px;">
                <div class="modal-body">
          		  <table class="layui-table" lay-skin="nob">
				    <tr><td >计划标题:</td><td><input type="text" value="{{plan.pl_name}}" id="pl_name"></td></tr> 
				    <tr><td>执行人:</td><td><input type="text" value="{{plan.pl_username}}" ></td></tr>
				    <tr><td>开始时间:</td><td><input type="text" class="ctime" value="{{plan.pl_starttime}}" id="pl_starttime"></td></tr>
				    <tr><td>结束时间:</td><td><input type="text" class="ctime" value="{{plan.pl_endtime}}" id="pl_endtime"></td></tr>
				    <tr><td>内容详情:</td><td><textarea style="min-width:300px;min-height:70px;max-width:300px;max-height:70px;" id="pl_content">{{plan.pl_content}}</textarea></td></tr>
				 </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                	 <button type="submit" class="btn btn-primary" data-dismiss="modal" v-on:click="updatePlan($event,plan.pl_id)">提交</button>
                </div>
            </div>
        </div>
    </div> 
	<!-- 添加计划模态框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="mtk">
                <div class="modal-body">
          		  <table class="layui-table" lay-skin="nob">
				    <tr><td>计划标题:<input type="text" id="plname"></td></tr> 
				    <tr><td>开始时间:<input type="text" class="ctime" id="startt"></td></tr>
				    <tr><td>结束时间:<input type="text" class="ctime" id="endt"></td></tr>
				    <tr><td>执行人员:<input type="text" id="uname"></td></tr>	
				    <tr><td>计划内容:<textarea cols="40" rows="6" name="pl_content" id="content"></textarea></td></tr>
				 </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" data-dismiss="modal" v-on:click="insertplan()">提交</button>
                </div>
            </div>
        </div>
    </div> 
    
</div>
<script>
$(function(){
	
	lay('.ctime').each(function(){
		laydate.render({
		elem: this,
		type: 'datetime',
		trigger: 'click',
		format:'yyyy-M-d H:m',
		})
	});
 	
	var vue=new Vue({
		el:'#main',
		data:{
			plist:'',
			plan:'',
		},
		methods:{
			
			queryplan:function(curr){
				var rebbs_bid=$("#replyid").val();
				$.ajax({
					url:'../queryPlan',
					type:'post',
					data:{curr:curr},
					dataType:'json',
					success:function(result){
						console.log(result);
						vue.plist=result.plist;
						
						layui.use(['laypage', 'layer'], function(){		//layPage的固定格式，分页
							var laypage = layui.laypage,
							layer = layui.layer;
							laypage.render({
								elem:'fenye',			//作用域	
								curr:curr,				//当前页
								count:result.total,		//获取总数	
								limit:4,  				//获取每页显示 
								layout: ['count', 'prev', 'page', 'next', 'skip'], 
								jump:function(obj,first){
									console.log(".............");
									if(!first){
										vue.queryplan(obj.curr);
									}
								}
							})
						});
					}
				})
			},
			deleteplan:function(){				//删除计划
				var arr=[];
					$(".child_item:checked").each(function(i){
						arr[i]=$(this).val();
					});
					console.log(arr);
					$.ajax({
						url:'../deletePlan',
						data:{arr:arr},
						type:'post',
						dataType:'json',
						success:function(result){
							console.log(result);
							location.reload();
						}
					})
				
				
			},
			xgmtk:function($event,pl_id){
				var el=event.currentTarget;
				console.log(pl_id);
				$.ajax({
					url:'../showPlan',
					type:'post',
					data:{pl_id:pl_id},
					dataType:'json',
					success:function(result){
						console.log(result);
						vue.plan=result;
					}
				})
				$("#modifPlan").modal("show");
			},
			upState:function(event,pl_id){
				var pl_state=$(".sta").val();
				console.log("状态修改"+pl_state);
				$.ajax({
					url:'../updateState',
					type:'post',
					data:{pl_state:pl_state,pl_id:pl_id},
					dateType:'json',
					success:function(result){
						location.reload();
					}
				})
			},
			updatePlan:function($event,pl_id){
				var el=event.currentTarget;
				var pl_name=$("#pl_name").val();
				var pl_username=$("#pl_username").val();
				var pl_starttime=$("#pl_starttime").val();
				var pl_endtime=$("#pl_endtime").val();
				var pl_content=$("#pl_content").val();
				console.log("1:"+pl_id+",2:"+pl_name+",3:"+pl_starttime+",4:"+pl_endtime+",5:"+pl_content);
				$.ajax({
					url:'../updatePlan',
					type:'post',
					data:{pl_id:pl_id,pl_name:pl_name,pl_username:pl_username,pl_starttime:pl_starttime,pl_endtime:pl_endtime,pl_content:pl_content},
					dataType:'json',
					success:function(result){
						if(result!=0){
							alert("添加成功");
							location.reload();
							return;
						}else{
							alert("再来吧");
							location.reload();
							return;
						}
					}
				})
				
			},
			showplan:function(event,pl_id){
				var el=event.currentTarget;
				console.log(pl_id);
				$.ajax({
					url:'../showPlan',
					type:'post',
					data:{pl_id:pl_id},
					dataType:'json',
					success:function(result){
						console.log(result);
						vue.plan=result;
					}
				})
				$("#showContent").modal("show");
			},
			insertplan:function(){
				var pl_name=$("#plname").val();
				var pl_username=$("#uname").val();
				var pl_content=$("#content").val();
				var pl_starttime=$("#startt").val();
				var pl_endtime=$("#endt").val();
				console.log("1:"+pl_name+",2:"+pl_content+",3:"+pl_starttime+",4:"+pl_endtime+",5:"+pl_username);
				$.ajax({
					url:'../insertPlan',
					type:'post',
					data:{pl_name:pl_name,pl_username:pl_username,pl_content:pl_content,pl_starttime:pl_starttime,pl_endtime:pl_endtime},
					dataType:'json',
					success:function(result){
						console.log("添加返回值测试"+result);
						if(result!=0){
							alert("添加成功");
							location.reload();
							return;
						}else{
							alert("再来吧");
							location.reload();
							return;
						}
					}
				})
			}, 
		
		}
	});
	vue.queryplan(1);
});
$("#addnotice").click(function(){		//使用了bootstrap的模态框，触发方法
	$("#myModal").modal("show");
});
function current(){ 
	var d=new Date(),str=''; 
	str +=d.getFullYear()+'-'; //获取当前年份 
	str +=d.getMonth()+1+'-'; //获取当前月份（0——11） 
	str +=d.getDate()+'  '; 
	str +=d.getHours()+':'; 
	str +=d.getMinutes()+''; 
	/* str +=d.getSeconds()+'秒';  */
	return str; 
} ;
//复选框选中
/* $("#checkAll").click(function(){
	if($("#checkAll").prop("checnked")){
		$("[name = check]:checkbox").attr("checked", true);
	}else{
		$("[name = chkItem]:checkbox").attr("checked", false);
	}
}); */
$(document).on("click","#checkAll",function(e){
	var child=$(this).attr("rel");
	$(".child_"+child).prop('checked',$(this).prop("checked"));
})
</script>
</body>
</html>